<template>
  <div>
    <header>
      <n-bar></n-bar>
    </header>
    <div class="cont">
      <div class="cont_top">
        <p>订单号：{{outTradeNo}}</p>
        <b>￥</b>
        <span>￥{{List.countmoney/100 | toPrice}}</span>
      </div>
      <div class="cont_bot">
        <p>请选择支付方式</p>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell @click="radio = '1'">
              <template #right-icon>
                <van-image
                  width="0.3rem"
                  height="0.3rem"
                />
                <p class="zhifu1">微信支付</p>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell @click="radio = '2'">
              <template #right-icon>
                <van-image
                  width="0.3rem"
                  height="0.3rem"
                />
                <p class="zhifu">支付宝支付</p>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <div class="foot">
      <span>确定支付</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "",
      List: JSON.parse(sessionStorage.getItem("orderInfo")),
      outTradeNo: this.$route.query.outTradeNo,
    };
  },
  methods: {},
};
</script>

<style scoped>
.zhifu1{
  margin-right: 2rem;
}
.zhifu {
  margin-right: 1.86rem;
}
/* 头部 */
header {
  background-color: #ff6040;
  box-sizing: border-box;
  /* margin-bottom: 0.34rem; */
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}
.cont .cont_top {
  margin-top: 0.3rem;
  text-align: center;
}
.cont .cont_top p {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.16rem;
  color: #999;
}
.cont .cont_top span {
  font-size: 0.3rem;
  color: #000;
}
.cont .cont_bot {
  margin-top: 0.35rem;
  padding-left: 0.3rem;
}
.cont .cont_bot > p {
  font-size: 0.18rem;
}
.cont .cont_bot ul li {
  margin-top: 0.1rem;
}
.cont .cont_bot ul li i {
  font-size: 0.15rem;
  color: blue;
  margin-right: 0.1rem;
}
.cont .cont_bot ul li span {
  font-size: 0.15rem;
}
.cont .cont_bot ul li:nth-child(2) i {
  color: #57b459;
}
.cont .cont_bot ul li input {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  float: right;
  margin-right: 0.25rem;
}
.foot {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: #fff;
  position: fixed;
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
}
.foot span {
  font-size: 0.18rem;
  background-color: #0fbbef;
  padding: 0.17rem 0.9rem;
  border-radius: 0.33rem;
  color: #fff;
}
</style>
